import { useRef, useState } from "react";
import { Pressable, DrawerLayoutAndroid, StyleSheet } from "react-native";
import type { DrawerLayoutAndroidProps } from "react-native";

// 全屏遮罩层(覆盖在视频组件上面, 目的是添加一些交互操作)
export default (props: DrawerLayoutAndroidProps) => {
  const drawer = useRef<DrawerLayoutAndroid>(null);
  const [visible, setVisible] = useState(false);

  /** drawer 组件 */
  const DrawerComp = (
    <Pressable style={[StyleSheet.absoluteFill, styles.container]}>
      {/* 抽屉 */}
      <DrawerLayoutAndroid {...props} ref={drawer} />
    </Pressable>
  );

  /** 打开 Drawer */
  const openDrawer = () => {
    setVisible(true);
    setTimeout(() => {
      if (drawer.current) {
        drawer.current.openDrawer();
      } else {
        console.log("drawer 还未挂载", drawer);
      }
    }, 100);
  };

  /** 关闭 Drawer */
  const closeDrawer = () => {
    if (drawer.current) {
      drawer.current.closeDrawer();
    } else {
      console.log("drawer 还未挂载", drawer);
    }

    setVisible(false);
  };

  return {
    DrawerComp: visible ? DrawerComp : <></>,
    drawerVisible: visible,
    openDrawer,
    closeDrawer
  };
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "rgba(0, 0, 0, 0.2)"
  }
});
